import { fetchList } from ".";
import { drawerVisible } from "./drawer";
import {
  merchantOptions,
  defaultModalFormState,
  operateType,
  tmpMerchantOptions,
  tableActiveKey,
  defaultVisible,
} from "./store";
import styles from "@/views/trade/recharge/index.module.less";
export const modalVisible = defaultVisible[tableActiveKey.value];
export const modalLoading = ref(false);
export const modalTitle = ref("");
export const modalConfig = () => {
  const defineModal = {
    modalInstance: ref(null),
    loading: modalLoading,
    visible: modalVisible,
    maskClosable: true,
    title: modalTitle,
    destroyOnClose: true,
    reverse: ref(true),
    formState: defaultModalFormState[tableActiveKey.value],
    formConfig: {
      style: {
        width: operateType.value === "agree" ? "auto" : "100%",
      },
    },
    on: {
      async finish(values: any) {
        const { loading, visible } = defineModal;
        try {
          loading.value = true;
          if (operateType.value === "agree") {
            const res: any = await withdrawApi.updateAgree({
              withdraw_id:
                defaultModalFormState[tableActiveKey.value].withdraw_id,
              pay_platform_id:
                defaultModalFormState[tableActiveKey.value].pay_platform_id,
              passageway:
                defaultModalFormState[tableActiveKey.value].passageway,
              amount: +defaultModalFormState[tableActiveKey.value].amount,
            });
            if (res.code != 200) return message.error(res.message);
          }
          if (operateType.value === "refuse") {
            const res: any = await withdrawApi.updateRefuse({
              withdraw_id:
                defaultModalFormState[tableActiveKey.value].withdraw_id,
              reason: defaultModalFormState[tableActiveKey.value].reason,
            });
            if (res.code != 200) return message.error(res.message);
          }
          message.success($t("base.updateSucess"));
          fetchList();
        } catch (error: any) {
          message.error(error.message);
        } finally {
          loading.value = false;
          visible.value = false;
          drawerVisible.value = false;
        }
      },
    },
    slot: {
      extra_form_item: () => {
        return (
          <>
            {operateType.value === "agree" ? (
              <div class={styles.modal_container}>
                <div class={styles.title}>
                  {$t("withdraw66") + "USDT" + $t("withdraw58")}
                </div>
                <div class={styles.Table}>
                  <div class={styles.Thead}>
                    <div class={styles.row}>
                      <div class={styles.col}>
                        {$t("withdraw69") + "(USDT)"}
                      </div>
                      <div class={styles.col}>
                        {$t("withdraw43") + "(USDT)"}
                      </div>
                      <div class={styles.col}>
                        {$t("withdraw70") + "(USDT)"}
                      </div>
                    </div>
                  </div>
                  <div class={styles.Tbody}>
                    <div class={styles.row}>
                      <div class={styles.col}>
                        {
                          defaultModalFormState[tableActiveKey.value]
                            .withdrawal_amount
                        }
                      </div>
                      <div class={styles.col}>
                        {
                          defaultModalFormState[tableActiveKey.value]
                            .withdraw_amount
                        }
                      </div>
                      <div class={styles.col}>
                        <a-input
                          placeholder={$t("placeholder169")}
                          vModel:value={
                            defaultModalFormState[tableActiveKey.value].amount
                          }
                        />
                      </div>
                    </div>
                  </div>
                  <div class={styles.Tfoot}>
                    <div class={styles.row}>
                      <div class={styles.col}>
                        <td class={styles.cell}>{$t("withdraw68")}</td>
                        <td class={styles.cell}>
                          <a-select
                            vModel:value={
                              defaultModalFormState[tableActiveKey.value]
                                .pay_platform_id
                            }
                            allowClear
                            placeholder={$t("placeholder54")}
                            options={merchantOptions.value}
                            style="width: 120px"
                            onChange={(value: any, option: any) => {
                              const item = tmpMerchantOptions.value.find(
                                (item: { id: any }) => item.id === value
                              );
                              defaultModalFormState[
                                tableActiveKey.value
                              ].passageway = item?.passageway_list?.[0];
                            }}
                          />
                        </td>
                      </div>
                      <div class={styles.col}>
                        <td class={styles.cell}>{$t("withdraw67")}：</td>
                        <td class={[styles.cell, styles.red]}>
                          {!isEmptyType(
                            (+defaultModalFormState[tableActiveKey.value]
                              ?.amount)?.toFixed?.(2)
                          )
                            ? (+defaultModalFormState[tableActiveKey.value]
                                ?.amount)?.toFixed?.(2)
                            : null}
                        </td>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <a-form-item
                label="说明"
                name="reason"
                extra={<i class="fs10">{$t("withdraw65")}</i>}
              >
                {withDirectiveInput({
                  vNode: (
                    <a-textarea
                      v-model:value={
                        defaultModalFormState[tableActiveKey.value].reason
                      }
                      rows="4"
                      show-count
                      maxlength="20"
                      placeholder={
                        $t("placeholder174") + 20 + $t("placeholder175")
                      }
                    />
                  ),
                })}
              </a-form-item>
            )}
          </>
        );
      },
    },
  };
  return defineModal;
};
